﻿@using FwProject.Product.Dto
@model ProductTypeUpdateDto
@{
}
<style>
    .layui-table tr th, .layui-table tr td {
        text-align: center;
        padding: 9px 15px !important
    }
</style>
@*<a class="layui-btn layui-btn-normal" href="javascript:">添加</a>*@
<div class="main" style="background-color: white;">
    <div class="buttonArea" style="height: auto;margin-left: 15px; margin-top:15px;">
        <a href="javascript:void(0)" class="button add-pargroup layui-btn layui-btn-normal">新增参数组</a>
    </div>
</div>
<form id="form0" action="@Url.Action("UpdatePar",new { id=ViewBag.Id })" method="post" novalidate="novalidate" data-ajax="true" data-ajax-begin="LockAjaxCallbackBack" data-ajax-success="ReloadAjaxCallbackgoback" data-ajax-failure="FailureAjaxCallback" data-ajax-method="Post" role="form" lay-filter="form1">
    <div class="layui-form" style="padding:10px;">
        <div id="t" style="margin-bottom:70px;">
            @if (Model.ProductTypeParInputs.Count > 0)
            {
                for (int i = 0; i < Model.ProductTypeParInputs.Count; i++)
                {
                    <table class="layui-table" lay-skin="line">
                        <colgroup>
                            <col width="150">
                            <col width="150">
                            <col width="200">
                            <col>
                        </colgroup>
                        <thead>
                            <tr>
                                <th>参数组名</th>
                                <th>@Html.TextBoxFor(o=>o.ProductTypeParInputs[i].GroupName,new { @class= "layui-input group-name",@placeholder = "请输入参数组名" , @lay_verify = "required" })</th>
                                <th>@Html.HiddenFor(o=>o.ProductTypeParInputs[i].Id)<a class="layui-btn layui-btn-xs add-parvalue" data-index="@i">新增参数</a><a class="layui-btn layui-btn-danger layui-btn-xs del-group">删除</a></th>
                            </tr>
                        </thead>
                        <tbody>
                            @if (Model.ProductTypeParInputs[i].ProductTypeParvalueInputs.Count > 0)
                            {
                                for (int j = 0; j < Model.ProductTypeParInputs[i].ProductTypeParvalueInputs.Count; j++)
                                {
                                    <tr>
                                        <td>参数名</td>
                                        <td>@Html.TextBoxFor(o=>o.ProductTypeParInputs[i].ProductTypeParvalueInputs[j].Parvalue,new { @class= "layui-input parvalue", @placeholder = "请输入参数名", @lay_verify = "required" })</td>
                                        <td>@Html.HiddenFor(o => o.ProductTypeParInputs[i].ProductTypeParvalueInputs[j].Id)<a class="layui-btn layui-btn-danger layui-btn-xs del-parvalue">删除</a></td>
                                    </tr>
                                }
                            }
                        </tbody>
                    </table>
                }
            }
        </div>

        <div class="layui-layer-btn layui-layer-btn-" style="padding:8px 12px;z-index:1000;position: fixed;bottom:0;left: 1px;width: 98%;height: 50px; background:rgba(230,230,230,0.8)">
            <a id="save" class="layui-layer-btn0" type="submit" lay-submit="" lay-filter="saveprops">保存</a>
        </div>
    </div>
</form>

<script type="text/html" id="groupDemo">
    <table class="layui-table" lay-skin="line">
        <colgroup>
            <col width="150">
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
            <tr>
                <th>参数组名</th>
                <th><input name="ProductTypeParInputs[0].GroupName" class="layui-input group-name" placeholder="请输入参数组名" lay-verify="required" /></th>
                <th><a class="layui-btn layui-btn-xs add-parvalue" data-index="0">新增参数</a><a class="layui-btn layui-btn-danger layui-btn-xs del-group">删除</a></th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</script>

<script type="text/html" id="parDemo">
    <tr>
        <td>参数名</td>
        <td><input name="ProductTypeParInputs[0].ProductTypeParvalueInputs[0].Parvalue" class="layui-input parvalue" placeholder="请输入参数名" lay-verify="required" /></td>
        <td><a class="layui-btn layui-btn-danger layui-btn-xs del-parvalue">删除</a></td>
    </tr>
</script>
@section scripts{
    <script src="~/js/main.js"></script>
    <script type="text/javascript">
        var form, layer, layedit;
        layui.use(['form', 'layedit', 'layer'], function () {
            layedit = layui.layedit;
            form = layui.form;
            layer = layui.layer;


            //自定义验证规则
            form.verify({
                required: function (value) {
                    if (value == "") {
                        return '必填项不能为空';
                    }
                }
            });

        })


        function ReloadAjaxCallbackgoback(data, successInfo) {
            if (data.success) {
                parent.layer.msg('保存成功！')
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭当前iframe页面
            } else {
                layer.msg('保存失败：' + successInfo);
            }
        }

        $('.add-pargroup').on('click', function () {
            var h = $('#groupDemo').html();
            var l = $('#form0').find('table').length;
            h = h.replace(/ProductTypeParInputs\[0\]/g, "ProductTypeParInputs[" + l + "]");
            h = h.replace(/data-index="0"/g, "data-index='" + l + "'");
            var d = $(h);
            $('#t').append(d);

            form.render(null, 'form1');
        });

        $('#form0').on('click', '.add-parvalue', function () {
            var h = $('#parDemo').html();
            var tbody = $(this).parent().parent().parent().siblings('tbody');
            var l = tbody.find('tr').length;
            var index = $(this).data('index');
            h = h.replace(/ProductTypeParvalueInputs\[0\]/g, "ProductTypeParvalueInputs[" + l + "]");
            h = h.replace(/ProductTypeParInputs\[0\]/g, "ProductTypeParInputs[" + index + "]");
            var d = $(h);
            tbody.append(d);
        });

        $('#save').on('click', function () {
            $('#form0').submit();
        });

        $('#form0').on('click', '.del-group', function () {
            $(this).parent().parent().parent().parent().remove();
            var tbs = $('#form0').find('table');
            if (tbs.length > 0) {
                for (var i = 0; i < tbs.length; i++) {
                    $(tbs[i]).find('.group-name').attr("name", "ProductTypeParInputs[" + i + "].GroupName");
                    $(tbs[i]).find('.add-parvalue').attr("data-index", i);

                    var trs = $(tbs[i]).children("tbody").find("tr");
                    if (trs.length > 0) {
                        for (var j = 0; j < trs.length; j++) {
                            $(trs[j]).find('.parvalue').attr("name", "ProductTypeParInputs[" + i + "].ProductTypeParvalueInputs[" + j + "].Parvalue");
                        }
                    }


                }
            }
        });

        $('#form0').on('click', '.del-parvalue', function () {
            var tbody = $(this).parent().parent().parent();
            var index = tbody.parent().find(".add-parvalue").data("index");
            $(this).parent().parent().remove();
            var tbs = $('#form0').find('table');

            var trs = tbody.find('tr');
            if (trs.length > 0) {
                for (var i = 0; i < trs.length; i++) {
                    $(trs[i]).find('.parvalue').attr("name", "ProductTypeParInputs[" + index + "].ProductTypeParvalueInputs[" + i + "].Parvalue");
                }
            }

        })

    </script>
}

